<template>
  <!-- 发布公会招募 -->
  <component
    v-if="val.model_newgt"
    :is="gnew"
    @event-new="ct.event_gnew"
    v-model:window_open="val.model_newgt"
  >
  </component>
  <!-- 加载公会信息 -->
  <component
    v-if="val.model_loadguild"
    ref="load_modal"
    :is="load_guild"
    @event-refresh="ct.refresh"
    @event-new="ct.event_loadguild"
    @event-updinfo="ct.event_updinfo"
    v-model:id="val.load_id"
    v-model:window_open="val.model_loadguild"
  >
  </component>

  <!-- 我的招募信息 -->
  <component
    v-if="val.model_mygt"
    ref="my_modal"
    :is="gmy"
    @event-refresh="ct.refresh"
    @event-updinfo="ct.event_updinfo"
    v-model:window_open="val.model_mygt"
  >
  </component>
  <!-- 编辑招募信息 -->
  <component
    v-if="val.model_updinfo"
    ref="upd_modal"
    :is="updinfo"
    @event-refresh="ct.refresh"
    @event-new="ct.event_updback"
    v-model:id="val.upd_id"
    v-model:window_open="val.model_updinfo"
  >
  </component>
  <div class="_mbbox boxgap">
    <div class="nbox1">
      <n-flex justify="center">
        <n-button type="warning" :size="cfg.sizebtn" @click="val.model_newgt = true"
          >发布公会招募</n-button
        >
        <n-button :size="cfg.sizebtn" @click="val.model_mygt = true"
          >我的招募信息</n-button
        >
      </n-flex>

      <m-menu :val="val" :data="val.menu" />
      <div
        v-if="val.list?.length <= 0 && val.loading == false"
        class="tbox nbox3"
        style="justify-content: center"
      >
        <div class="_ct" style="font-size: 2em">无招募数据</div>
      </div>
      <n-grid
        :y-gap="cfg.mobile == false ? 15 : 6"
        :x-gap="cfg.mobile == false ? 15 : 6"
        :cols="parseInt((cfg.sswd - 50) / 275)"
      >
        <n-gi span="1" v-for="item in val.list">
          <div
            class="tbox nbox3 cp bg5"
            :class="`listbox_${val.mb}`"
            @click="ct.click_guild(item._id)"
          >
            <div class="_title _ct" :class="`title_${val.mb}`">
              {{ item.guild_name }}
            </div>

            <n-grid
              class="ngrid"
              :y-gap="cfg.mobile == false ? 12 : 8"
              :x-gap="cfg.mobile == false ? 12 : 8"
              :cols="3"
            >
              <template v-if="cfg.mobile == true">
                <n-gi>
                  <n-statistic label="公会区服">{{
                    val.tab_sv?.[item.sv - 1]?.label
                  }}</n-statistic>
                </n-gi>

                <n-gi>
                  <n-statistic label="公会排名" :value="item.top" />
                </n-gi>
                <n-gi>
                  <n-statistic label="伤害要求">{{ item.dmg_E }} 亿</n-statistic>
                </n-gi>
              </template>
              <template v-else>
                <n-gi>
                  <n-statistic label="公会区服">{{
                    val.tab_sv?.[item.sv - 1]?.label
                  }}</n-statistic>
                </n-gi>

                <n-gi>
                  <n-statistic label="公会排名" :value="item.top" />
                </n-gi>
                <n-gi>
                  <n-statistic label="伤害要求">{{ item.dmg_E }} 亿</n-statistic>
                </n-gi>
                <n-gi>
                  <n-statistic label="发布时间">
                    <n-time :time="item.uptime" type="relative" unix
                  /></n-statistic>
                </n-gi>
                <n-gi>
                  <n-statistic label="招募到期">
                    <n-time :time="item.time" format="MM-dd hh:mm" unix
                  /></n-statistic>
                </n-gi>
              </template>
            </n-grid>
          </div>
        </n-gi>
      </n-grid>
    </div>
  </div>
</template>
<style scoped>
.listbox_m {
  padding: 8px;
}
.title_m {
  min-height: 20px;
  line-height: 13px;
  font-size: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title_pc {
  min-height: 45px;
  line-height: 13px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<script>
import { cfg } from "@/cfg/cfg.js";
import gnew from "./recruit/gnew.vue";
import load_guild from "./recruit/load_guild.vue";
import gmy from "./recruit/gmy.vue";
import updinfo from "./recruit/gupd.vue";
import { tab } from "./recruit/gselect.js";

export default defineComponent({
  setup() {
    const body = ref(null);
    const my_modal = shallowRef(null);
    const load_modal = shallowRef(null);
    const upd_modal = shallowRef(null);
    const set = {
      func: (item, value) => {
        let text = item.value;
        //去掉开头的sl_
        text = text.replace("sl_", "");
        val.select[text] = value;
        ct.upselect();
      },
      tag: (value) => {
        ct.upselect();
      },
    };
    let ct = {
      upselect: (data) => {
        nextTick(() => {
          ct.get_list();
        });
      },
      click_guild: (id) => {
        id = id.$oid;
        val.load_id = id;
        val.loading = true;
        val.model_loadguild = true;
      },
      get_list: async (page) => {
        try {
          const sl = val.select;
          if (sl.dmg_E >= 1000) {
            cfg.msg.error("伤害要求填写错误 1 = 1亿");
            return;
          }

          val.loading = true;
          let res = await cfg.axios.get(`${cfg.url}`, {
            params: {
              t: "v2/get",
              t2: "introduction/recruit",
              t3: "load_list",
              page: page,
              select: sl,
            },
          });
          val.list = res.data.data;
          nextTick(() => {
            val.loading = false;
          });
          return;
        } catch (error) {
          cfg.msg.error(error);
        }
      },
      refresh: () => {
        ct.get_list();
        return;
      },
      // 打开更新公会窗口的事件
      event_updinfo: (id, type) => {
        val.updtype = type;
        val.upd_id = id;
        val.model_updinfo = true;
      },
      // 加载公会触发的关闭事件
      // 用于关闭loading界面
      event_loadguild: () => {
        val.loading = false;
      },
      // 创建公会成功触发的事件
      // 用于创建成功后刷新列表
      event_gnew: async (data) => {
        ct.get_list(1);
        return;
      },
      //编辑公会成功触发的事件
      event_updback: async (data) => {
        if (val.updtype == "gupd") {
          //我的公会->修改后返回
          //重载我的公会列表
          my_modal.value.ct.load_guild();
        } else {
          //查看->编辑返回
          load_modal.value.ct.load_guild(data.id);
          //重载查看公会数据
        }
      },
    };
    let val = reactive({
      select: {
        sv: 1,
        top: 99999,
        px: "time",
      },
      upd_id: null,
      loading: true,
      model_newgt: false,
      model_mygt: false,
      model_updinfo: false,
      list: [],
      menu: [
        {
          func: set.func,
          name: "筛选排名",
          bname: "排名",
          icon: `filter-o`,
          value: `sl_top`,
          type: `select`,
          list: [
            {
              text: "所有排名",
              value: 99999,
            },
            {
              text: "保前10",
              value: 10,
            },
            {
              text: "保前20",
              value: 20,
            },
            {
              text: "保前50",
              value: 50,
            },
            {
              text: "保前100",
              value: 100,
            },
            {
              text: "保前200",
              value: 200,
            },
            {
              text: "保前400",
              value: 400,
            },
          ],
        },
        {
          func: set.func,
          name: "筛选区服",
          bname: "区服",
          icon: `filter-o`,
          value: `sl_sv`,
          type: `select`,
          list: [
            {
              text: "B服 / 官服",
              value: 1,
            },
            {
              text: "渠道服",
              value: 2,
            },
            {
              text: "国际服",
              value: 3,
            },
            {
              text: "韩服",
              value: 4,
            },
            {
              text: "switch服",
              value: 5,
            },
            {
              text: "日服",
              value: 6,
            },
          ],
        },
        {
          func: set.func,
          name: "公会标签",
          bname: "标签",
          icon: `filter-o`,
          value: `sl_tag`,
          type: `ckbox`,
          list: [
            {
              text: "全勤出刀",
              value: 1,
            },
            {
              text: "随缘出刀",
              value: 2,
            },
            {
              text: "随缘在线",
              value: 3,
            },
            {
              text: "休闲公会",
              value: 4,
            },
            {
              text: "什么都玩",
              value: 5,
            },
            {
              text: "公会活动",
              value: 6,
            },
            {
              text: "语音聊天",
              value: 7,
            },
            {
              text: "群内活跃",
              value: 8,
            },
            {
              text: "无门槛",
              value: 9,
            },
            {
              text: "无聊天群",
              value: 10,
            },
          ],
        },
        {
          func: set.func,
          name: "伤害",
          bname: "伤害",
          tips: "伤害单位 亿",
          icon: `filter-o`,
          value: `sl_dmg_E`,
          type: `input`,
          fjtype: `num`,
        },
      ],
      ...tab,
    });
    if (cfg.mobile == true) {
      val.mb = "m";
    } else {
      val.mb = "pc";
    }

    //手机端触发后退移除公会查询
    const hand = () => {
      if (val.load_id != null) {
        val.load_id = null;
        val.loading = false;
        val.model_loadguild = false;
      }
    };
    // 离开组件时移除监听
    onUnmounted(() => {
      window.removeEventListener("popstate", hand);
    });

    onMounted(async () => {
      window.addEventListener("popstate", hand);
      ct.get_list(1);
      return;
    });

    return {
      val,
      ct,
      cfg,
      body,
      gnew,
      gmy,
      load_guild,
      updinfo,
      upd_modal,
      my_modal,
      load_modal,
    };
  },

  watch: {},
});
</script>
